<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        .contentCSS {
            border: 1px solid #cccccc;
            border-radius: 4px;
            word-wrap: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 10;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<p id="myId"></p>
<p id="number"></p>
<p id="time"></p>
<div id="contentBox" style="height: 400px;border: #cccccc 1px solid;overflow-y: scroll">

</div>
<div>
    <input type="text" name="content" id="content">
    <button id="submit">发送</button>
</div>
</body>
<script src="js/jQuery.js"></script>
<script src="js/ws.js"></script>
<script>
    let user = {
        id: undefined,
    }
    let sys = {
        time: undefined,
    }
    let dom = {
        myId: document.getElementById("myId"),
        box: document.getElementById("contentBox"),
        content: document.getElementById("content"),
        submit: document.getElementById("submit"),
        time: document.getElementById("time"),
        pn: document.getElementById("number"),
    }
    let webSocket = new MyWebSocket();

    function createDom(data) {
        let div = document.createElement("div");
        let id = document.createElement("p")
        let time = document.createElement("p")
        let content = document.createElement("div")
        id.innerText = data.id;
        if (data.id === user.id) {
            id.style.color = "red";
        }
        id.style.margin = "0px"
        time.style.margin = "0px"
        time.innerText = data.time;
        content.className = "contentCSS";
        content.innerText = data.content;
        div.appendChild(id)
        div.appendChild(time)
        div.appendChild(content)
        div.style.margin = "10px";
        return div;
    }

    function ajax(url, data, async) {
        let back;
        let that = this;
        $.ajax({
            url: url,
            method: "post",
            async: async,
            contentType: "application/json",
            data: JSON.stringify(data),
            dataType: "json",
            success: function (res) {
                back = res;
            }
        })
        if (back.isError) {
            alert(back.errorMessage);
        }
        return back;
    }

    function showTime() {
        let time = new Date();
        dom.time.innerText = time.toLocaleTimeString();
        sys.time = time.toLocaleTimeString()
        setTimeout(showTime, 1000);
    }

    function updateDom(dom, text) {
        dom.innerText = text;
    }

    function getId() {
        let back = ajax("/login", "", false);
        user.id = back.id;
        updateDom(dom.myId, "id: " + user.id);
        updateDom(dom.pn, "当前人数: " + back.number);
    }

    function submit() {
        let data = {
            id: user.id,
            content: dom.content.value,
            time: sys.time,
        }
        dom.content.value = "";
        ajax("/send", data, false);
    }

    function showContent(data) {
        dom.box.appendChild(createDom(data));
        dom.box.scrollTop = dom.box.scrollHeight
    }

    function getContent(event) {
        console.log(event)
        let data = JSON.parse(event.data);
        if (data.content != null) {
            showContent(data.content)
        }
        updateDom(dom.pn, "当前人数: " + data.number)
    }

    window.onload = function () {
        showTime();
        getId();
        webSocket.link(user.id)
        webSocket.ws.onmessage = getContent;
    }
    dom.submit.addEventListener("click", submit);

</script>
</html>